<template>
    <el-table :data="state.tableData" border style="width: 100%">
        <el-table-column prop="account" label="账号" width="180" />
        <el-table-column prop="name" label="用户名" width="180" />
        <el-table-column label="上传凭证">
            <template #default="scope">
                <span style="margin-left: 10px">{{ scope.row.proof }}</span>
                <el-tooltip class="box-item" effect="dark" content="凭证可作为文件上传密钥token" placement="bottom">
                    <el-icon class="cursor-pointer ml-1" @click="copy(scope.row.proof)">
                        <CopyDocument />
                    </el-icon>
                </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column prop="scope" label="权限" />
    </el-table>
</template>

<script lang="ts" setup>
import { httpUserList } from '@/api/user'
import { onMounted, reactive } from 'vue'
import { CopyDocument } from '@element-plus/icons-vue'
import useCurrentInstance from "@/utils/useCurrentInstance"
const { proxy } = useCurrentInstance()

const state = reactive({
    tableData: [],
})

const fetchData = async () => {
    const res: any = await httpUserList()
    const { code, data } = res
    if (code === 200) {
        state.tableData = data
    }
}

const copy = (str: string) => {
    const cInput = document.createElement("input")
    cInput.value = str
    document.body.appendChild(cInput)
    cInput.select() // 选取文本框内容
    document.execCommand("Copy")// 执行浏览器复制命令
    proxy.$message.success('复制成功')
    document.body.removeChild(cInput)
}

onMounted(() => {
    fetchData()
})
</script>
